<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=">
<script type="text/javascript" src="../../static/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
    	cuisDict = eval($("#cuisines_dict").text());
    	topCuisSelc = $("#cuis_selc");
    	
    	topCuisDict = getTopCuisines(cuisDict);
    	$.each(topCuisDict,function(i,o){
        	topCuisSelc.append(createOption(o));
        });
		topCuisSelc.change(function(){
			v = $(this).val();
			if ( isLastCuis(cuisDict, v ) ){
				$('input[name="cuisines"]').val(v);
			}
			else {
				subCuisSelc = createSubCuisSelc(cuisDict, v);
				$("select:last").after(subCuisSelc);
			}	
		});	   

		$("#cuisines_ul").append(createUlCuis(cuisDict, null));
			
		
    	//创建一个option
        function createOption(cuis){
            op = "<option value=" + cuis.id + ">" + cuis.name+ "</option>"
			return $(op)
        }

        //创建下一级菜系选择框
        function createSubCuisSelc(dict,v){
			subCuisSelc = $("<select id=cuisSelc" + v + "></select>");
			subCuisDict = getSubCuis(dict, v);
	    	$.each(subCuisDict ,function(i,o){
	        	subCuisSelc.append(createOption(o));
	        });
	        return subCuisSelc;
        }
		    	
	    //获得1级菜系
		function getTopCuisines(dict){
			topCuis = $.grep(dict,function(o,i){
				return o.level == 1;
			});
			return topCuis;
		}

		function getLevelCuis(dict, level) {
			levelCuis = $.grep(dict,function(o,i){
				return o.level == level;
			});
			return levelCuis;
		}
	
		//获得对应菜系的子菜系列表
	    function getSubCuis(dict, pid) {
			subCuis = $.grep(dict,function(o,i){
				return o.parent_id == pid; 
			});
	    	return subCuis;
	    } 
	    
		//判断此菜系还有没有子菜系
	    function isLastCuis(dict, id) {
		    rs = true;
			$(dict).each(function(i,e){
				if( e.parent_id != null && e.parent_id == id ) {
					rs = false;
				}
			});
			return rs;
	    }
	    
        //创建下一级菜系选择框
        function createSubCuisSelc(dict,v){
			subCuisSelc = $("<select id=cuisSelc" + v + "></select>");
			subCuisDict = getSubCuis(dict, v);
	    	$.each(subCuisDict ,function(i,o){
	        	subCuisSelc.append(createOption(o));
	        });
	        return subCuisSelc;
        }

	    function createUlCuis(dict,pid) {
			ul = $('<ul id=cuis_'+ pid + '></ul>');
			ulDict = $.grep(dict,function(o,i){
				return o.parent_id == pid; 
			});
			for( i=0;i<ulDict.length;i++ ) {
				li = $('<li rel="'+ ulDict[i].id + '">' + ulDict[i].name + '</li>');
				if( !isLastCuis(dict, ulDict[i].id) ) {
					subCuisDict = getSubCuis(dict, ulDict[i].id);
					li.append(createUlCuis(subCuisDict, ulDict[i].id));
				}
				ul.append(li);	
			}
			return ul;
	    }
    });



    </script>


<title>Insert title here</title>
</head>
<body>
		<div id="cuisines_dict" >{{cuisines_dict|safe}}</div>
		<div id="cuisines_ul" ></div>
		<input type="text" name="cuisines" value=""/>
        <select id="cuis_selc" >
        	<option>请选择</option>
        </select>  
</body>

</html>